<template>
    <div class="accountMain whiteBg">
        <div class="withDrawMain padding50">
            <div class="withDrawMainTit">投资记录</div>
            <div class="investRecording marginTop20">
                <el-tabs v-model="activeName" type="card" class="myTabs">
                    <!--待回款-->
                    <el-tab-pane label="待回款" name="first">
                        <recordList :isRaising="false"></recordList>
                    </el-tab-pane>
                    <!--募集中-->
                    <el-tab-pane label="募集中" name="second">
                        <recordList :isRaising="true"></recordList>
                    </el-tab-pane>
                    <!--已回款-->
                    <el-tab-pane label="已回款" name="third">
                        <recordList :isRaising="false"></recordList>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import recordList from '../include/RecordList.vue'
    export default{
        components: {
            recordList
        },
        data(){
            return {
                activeName: 'first'
            }
        }
    }
</script>

<style lang="scss" scoped>
    .investRecording{
        width: 100%;
    }
</style>

<style lang="scss">
    .myTabs{
        &>.el-tabs__header{ border-bottom: 2px solid #dfdfdf; margin-bottom: 30px;}
        .el-tabs__nav-wrap{ margin-bottom: -2px;}
        .el-tabs__item{ font-size: 16px;padding: 0 25px;}
        &>.el-tabs__header .el-tabs__nav{ border: none; border-radius: 0;}
        &>.el-tabs__header .el-tabs__item{ border-left: none; height: 50px; line-height: 45px;}
        .el-tabs__item.is-active{ color: #000;}
        .el-tabs__item:hover{ color: #ff6235;}
        &>.el-tabs__header .el-tabs__item.is-active{ border-bottom: 2px solid #ff6235;}
    }
</style>